<template>
  <div>
    <van-nav-bar
      title="物品详细信息"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="item_box">
      <van-image width="100%" contain :src="itemInfo.url" />
      <h3 class="item_title">{{ itemInfo.name }}</h3>
      <van-tag type="primary">{{ itemInfo.type }}</van-tag>
      <van-tag :type="tagType">{{ tagName }}</van-tag>
      <div class="item_info">
        <ul>
          <li>
            <span class="item_key">生产时间：</span>
            <span class="item_value">{{ itemInfo.startDate }}</span>
          </li>
          <li>
            <span class="item_key">过期时间：</span>
            <span class="item_value">{{ itemInfo.endDate }}</span>
          </li>
          <li>
            <span class="item_key">倒数日：</span>
            <span class="item_value countdown">{{ countdownDay }}天</span>
          </li>
        </ul>
      </div>
    </div>

    <van-button
      class="edit_button"
      icon="edit"
      round
      size="small"
      type="info"
      @click="goEditPage"
    />
    <van-button
      class="delete_button"
      icon="delete-o"
      round
      size="small"
      type="info"
      @click="deleItem"
    />
  </div>
</template>

<script>
import { AV } from "@/App";

export default {
  data() {
    return {
      itemInfo: {
        name: "",
        startDate: "",
        ShelfLife: "",
        endDate: "",
        url: "",
        type: "",
      },
      tag: "",
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
    goEditPage() {
      // 路由跳转传参
      this.$router.push({
        path: "/change",
        query: { id: this.$route.query.id },
      });
    },
    async deleItem() {
      // 发起删除请求
      // 跳转到首页
      const todo = AV.Object.createWithoutData(
        "FoodPeriod",
        this.$route.query.id
      );
      // 删除确认
      let confirm = await this.$dialog.confirm({
        message: "您确定需要删除该物品吗？",
      });
      if (confirm) {
        await todo.destroy();
        this.$router.replace("/home/dashboard");
        location.reload();
      }
    },
    async getItem() {
      const query = new AV.Query("FoodPeriod");
      let res = await query.get(this.$route.query.id);
      // 数据
      let data = res.attributes;
      // console.log(data);

      if ("img" in data) {
        let imgSrc = data.img.attributes.url;
        this.itemInfo.url = imgSrc;
      } else {
        this.itemInfo.url =
          "https://img.3dmgame.com/uploads/allimg/161212/346_161212150216_1_lit.gif";
      }

      this.itemInfo.name = data.Item;
      this.itemInfo.startDate = data.Start;
      this.itemInfo.endDate = data.Deadline;
      this.itemInfo.ShelfLife = data.ShelfLife;
      this.itemInfo.type = data.Type;
    },
  },
  computed: {
    countdownDay() {
      // 过期时间
      var endDate = Date.parse(this.itemInfo.endDate);
      let currentDate = new Date();
      var days = (endDate - currentDate) / (1 * 24 * 60 * 60 * 1000);
      return Math.ceil(days);
    },
    tagType() {
      var endDate = Date.parse(this.itemInfo.endDate);
      let currentDate = new Date();
      var days = (endDate - currentDate) / (1 * 24 * 60 * 60 * 1000);
      let type = days > 30 ? "success" : days > 0 ? "warning" : "danger";
      return type;
    },
    tagName() {
      var endDate = Date.parse(this.itemInfo.endDate);
      let currentDate = new Date();
      var days = (endDate - currentDate) / (1 * 24 * 60 * 60 * 1000);
      let name = days > 30 ? "良好" : days > 0 ? "临期" : "已过期";
      return name;
    },
  },
  mounted() {
    this.getItem();
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.item_title {
  line-height: 40px;
  margin-left: 10px;
}
.van-tag {
  margin-left: 10px;
}

.item_info {
  background-color: #efefed;
  margin: 3% 3%;
  padding: 3%;
  border-radius: 7px;
}

.item_info li {
  font-size: 12px;
  display: flex;
  line-height: 30px;
  justify-content: space-between;
}

.item_info li .item_key {
  color: #7e788af4;
}

.item_info li .item_value {
  color: #11110f;
}

.edit_button {
  position: fixed;
  bottom: 3%;
  right: 3%;
}

.delete_button {
  position: fixed;
  bottom: 3%;
  left: 3%;
}
.countdown {
  font-weight: bolder;
  font-size: 16px;
}
</style>
